import React, { FC, useEffect, useState } from 'react'
import { Row, Col,Carousel,Menu, Dropdown, Button,Modal,Form,Input,message,Tag   } from 'antd';
import {inject,observer} from "mobx-react"
import {useNavigate,Link} from 'react-router-dom'
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
    UserOutlined,
    LockOutlined,
    DownOutlined,
    LogoutOutlined,
    DeleteOutlined,
    ExclamationCircleOutlined,
    
  } from '@ant-design/icons';
import { reg } from '../utils/validate';
import { ajax } from '../api';
import { roleList } from '../utils';
import Avatar1 from './Avatar';
  const {confirm} = Modal;
const Head:FC<any>=({
uinfo,
collapsed
}) =>{
    const {userInfo,changeInfo}=uinfo
    const {myCollapsed,changecollapsed}=collapsed
    const navigate =  useNavigate()
    //控制修改密码的密码对话框显示
    const [show,setShow] = useState<boolean>(false)
    const [form] = Form.useForm()
    const handleOk=()=>{
        form.validateFields().then(value=>{
            console.log(value);
            //表单验证正确了，验证旧密码成功后才能修改面
            console.log(userInfo.password);
            
            if(value.newpass==value.oldpass){
                message.error("新旧密码不能相同")
            }else{
                //查询旧密码是否正确
                if(userInfo.password!=value.oldpass){
                    message.error("旧密码输入错误")
                }else{
                    console.log("修改");
                    
                    ajax.changeuser(value).then(result=>{
                        console.log(result);
                        if(result.code==200){
                            sessionStorage.removeItem('token')
                            changeInfo(null)
                            navigate("/login")
                        }

                        
                    })
                }
            }
            
        }).catch(err=>{
            message.error("请输入有效的密码")
        })
        
    }
    const handleCancel=()=>{
        setShow(false)
        
    }
    //点击修改密码
    const changePass=()=>{
        setShow(true)
    }

    const contentStyle:Object = {
        height: '100%',
        color: '#333',
        lineHeight: '64px',
        textAlign: 'center',
      };
    
    //退出登录
    const gotoLogin=()=>{
        confirm({
            title: '警告提示',
            icon: <ExclamationCircleOutlined />,
            content: '你真的确定退出登录吗?',
            cancelText:"暂不退出",
            okText: '确定',
            onOk() {
                console.log('OK');
                sessionStorage.removeItem('token')
                changeInfo(null)
                navigate("/login")
            },
            onCancel() {
              console.log('Cancel');
            },
        });
        
    }
  return (
    <div style={{height:"64px"}}>
        <Row style={{height:"100%"}}>
            <Col span={8} style={{height:"100%",lineHeight:"64px",display:"flex"}} >
                <span style={{fontSize:20,color:"#f50",cursor:'pointer'}} onClick={()=>changecollapsed(!myCollapsed)}>
                    {React.createElement(myCollapsed  ? MenuUnfoldOutlined : MenuFoldOutlined)}
                </span>
                <span style={{display:"block",marginLeft:"15px",fontSize:"20px",fontWeight:"bold",color:"#FFA726",height:"100%"}}>猫吃鱼校园管理系统</span>
            </Col>
            <Col span={8} style={{height:"100%"}}>
                
                <Carousel autoplay dots>
                    <div>
                    <h3 style={contentStyle}>富强，民主，文明，和谐</h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}>自由，平等，公正，法治</h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}>爱国，敬业，诚信，友善</h3>
                    </div>
                </Carousel>

            </Col>
            <Col span={8} style={{height:"100%"}}>
            {
            userInfo&&<Row>
                       <Col span={6}>
                        
                       <Dropdown overlay={
                           (
    
                            <Menu>
                              <Menu.Item key="1" icon={<MenuFoldOutlined />}>
                                  <Link to="/home/mine/main">首页</Link>
                              </Menu.Item>
                              <Menu.Item key="2" icon={<UserOutlined />}>
                                  <Link to="/home/mine/userMine">个人中心</Link>
                              </Menu.Item>
                              <Menu.Item key="3" onClick={changePass} icon={<LockOutlined />}>修改密码</Menu.Item>
                              <Menu.Item key="4" icon={<DesktopOutlined />}>
                              <Link to="/home/mine/anno">公告</Link>
                              </Menu.Item>
                            </Menu>
                          )
                       }>
                       <a className="ant-dropdown-link" onClick={e => e.preventDefault()} style={{cursor:"pointer",color:"#333"}}> 
                       {userInfo.username} <DownOutlined />
                       </a>
                       </Dropdown>
                       </Col>
                       <Col span={6} style={{position:"relative"}}>
                       <Tag  color={roleList.find((item:any)=>item.value==userInfo.role)?.color } style={{position:"absolute",left:0,right:0,bottom:0,top:0,margin:"auto",height:"20px",width:"50px",textAlign:"center",lineHeight:"20px"}}>
                            {roleList.find((item:any)=>item.value==userInfo.role)?.label }
                        </Tag>
                       </Col>
                       <Col span={6}  style={{position:"relative"}}>
                           <Avatar1
                           
                           ></Avatar1>
                       </Col>
                       <Col span={6} style={{position:"relative"}}>
                       <Button onClick={gotoLogin} type="primary"  shape="circle" danger icon={<DeleteOutlined />} size="middle" style={{position:"absolute",left:0,right:0,bottom:0,top:0,margin:"auto"}}/>
                       </Col>
                   </Row>
                   }
            </Col>
        </Row>
            {/* 修改密码弹出框 */}
        <Modal  
            title="修改密码" 
            visible={show} 
            onOk={handleOk} 
            onCancel={handleCancel}
            okText="确定修改"
            cancelText="取消"
            okType="danger"
        >
             <Form
                name="normal_login"
                className="myform"
                initialValues={{ 
                  role:1   
                }}
                form={form}
                
            >
                <Form.Item
                  name="oldpass"
                  label="旧密码"
                  rules={[ 
                    { required: true, message: '请输入密码' },
                    { pattern:reg.pwd,message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="旧密码" />
              </Form.Item>
              <Form.Item
                  name="newpass"
                  label="新密码"
                  rules={[
                    { required: true, message: '请输入密码' },
                    { pattern:reg.pwd,message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="新密码" />
              </Form.Item>
            </Form>   
        </Modal>
    </div>
  )
}
export default inject('uinfo','collapsed') (observer(Head))
